<template>
  <view class="container">
    <uv-navbar title="推广中心" bg-color="transparent" left-icon-color="#fff"
      :titleStyle="{color: '#fff','font-size': '36rpx','font-weight':'bold'}" autoBack></uv-navbar>
    <view class="my" :style="{paddingTop: `${statusBarHeight+ 44}px`,backgroundImage: `url(${'/static/my/bg.png'})`}">
      <view class="my_main">
        <view class="my_user">
          <view class="my_user_left">
            <image class="my_user_image" :src="'/static/my/avatar.jpg'"></image>
            <view>
              <text>小包子</text>
              <view>
                普通推广员
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="main_head">
        <view class="main_head_left">
          <view>累计奖励(元)</view>
          <text>10.00</text>
        </view>
        <button class="flex-center" @tap="gotoSecond('withdraw')">去提现</button>
      </view>
      <view class="main_price">
        <view class="main_price_box">
          <view>已提现佣金</view>
          <text>0.00</text>
        </view>
        <view class="main_price_box">
          <view>未提现佣金</view>
          <text>0.00</text>
        </view>
      </view>
    </view>
    <view class="main_tuiguan">
      <view class="main_tuiguan_box" @click="gotoSecond('team')">
        <image src="/static/my/tuandui.png" mode=""></image>
        <text>我的团队(0人)</text>
      </view>
      <view class="main_tuiguan_box" @click="gotoSecond('exchange')">
        <image src="/static/my/erweima.png" mode=""></image>
        <text>我的推广码</text>
      </view>
      <view class="main_tuiguan_box" @click="gotoAccountDetail">
        <image src="/static/my/mingxi.png" mode=""></image>
        <text>提现明细</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const statusBarHeight = ref()
  const gotoAccountDetail = () => {
    uni.navigateTo({
      url: '/pages/mySecondary/account/detail'
    })
  }
  const gotoSecond = (url : string) => {
    uni.navigateTo({
      url: `/pages/mySecondary/${url}/${url}`
    })
  }

  onPullDownRefresh(() => {

  })
  onLoad(async () => {
    uni.getSystemInfo({
      success: (res) => {
        console.log(res)
        statusBarHeight.value = res.statusBarHeight
      }
    });
  })
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 750rpx;
    background-color: #f4f4f4;

    .my {
      width: 750rpx;
      height: auto;
      position: relative;
      background-size: 100% 100%;
      color: #fff;

      &_main {
        width: 750rpx;
        height: 300rpx;
        color: #fff;
        padding: 20rpx 30rpx 40rpx;
        box-sizing: border-box;
      }

      &_user {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_left {
          display: flex;
          align-items: center;
          flex: 1;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;

          .my_user_image {
            margin-right: 26rpx;
            width: 124rpx;
            height: 124rpx;
            background: #969696;
            border-radius: 50%;
            background: #FFD38E;
            border: 2px solid #FFFFFF;
          }

          >view {
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;

            >view {
              font-weight: 500;
              font-size: 24rpx;
              background: linear-gradient(-30deg, #FFB438, #ff8e42, );
              padding: 5rpx 10rpx;
              border-radius: 30rpx;
              margin-top: 10rpx;
            }
          }
        }
      }
    }

    .main {
      margin-left: 30rpx;
      width: 690rpx;
      height: 310rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      margin-top: -100rpx;
      position: relative;
      z-index: 9;
      padding: 48rpx 40rpx;
      box-sizing: border-box;

      &_head {
        display: flex;
        justify-content: space-between;
        align-items: center;

        button {
          margin: 0;
          padding: 0;
          width: 124rpx;
          height: 54rpx;
          border-radius: 27rpx;
          border: 1px solid #228CFE;
          font-weight: 500;
          font-size: 30rpx;
          color: #228CFE;
          background-color: #fff;

          &:active {
            transform: translateY(2px);
          }
        }

        >view {
          font-weight: bold;
          font-size: 44rpx;
          color: #333333;

          view {
            margin-bottom: 8rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #666666;
          }
        }
      }

      &_price {
        margin-top: 30rpx;

        &_box {
          display: inline-block;
          font-weight: bold;
          font-size: 44rpx;
          color: #333333;
          margin-right: 132rpx;

          view {
            font-weight: 500;
            font-size: 24rpx;
            color: #666666;
            margin-bottom: 8rpx;
          }

        }
      }

      &_tuiguan {
        margin: 20rpx 30rpx;
        background-color: #fff;
        width: 690rpx;
        border-radius: 10rpx;
        display: flex;
        height: 130rpx;

        &_box {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          color: #666666;
          font-size: 28rpx;

          image {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 12rpx;
          }
        }
      }
    }

  }
</style>